<template>
    <div>
      <Header :position="position"></Header>
      <div>
        <div style="display: flex;width: 100%;height: 875px;">
          <div style="display: flex;width: 52%;flex-flow: column;margin-right: 10px;">
            <el-card style="width: 100%;margin-bottom: 10px;">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>故障类型分布</span>
              </div>
              <AnnualPie :test-data="this.faultData"  style="width: 300px;height: 400px"></AnnualPie>
<!--                          <div id="annualPie" style="width: 300px;height: 400px"></div>-->
            </el-card>
            <el-card style="width: 100%;height: 50%">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>数据帅选</span>
              </div>
              <div>
              <div style="margin-bottom: 30px">
                <label>车辆类型：</label>
                <el-select v-model="positionSelect1" placeholder="请选择车辆类型">
                  <el-option v-for="item in positionSelectData1" :key="item" size="small"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>

              <div style="margin-bottom: 30px">
                <label>故障位置：</label>
                <el-select v-model="positionSelect2" placeholder="请选择故障位置">
                  <el-option v-for="item in positionSelectData2" :key="item" size="small"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>

              <div style="margin-bottom: 30px">
                <label>故障类型：</label>
                <el-select v-model="positionSelect3" placeholder="请选择故障类型">
                  <el-option v-for="item in positionSelectData3" :key="item" size="small"
                             :label="item.name" :value="item.value"></el-option>
                </el-select>
              </div>
              <div style="text-align: center">
                <el-button type="primary" @click="searchData">点击检索</el-button>
              </div>
              </div>
              <!--            <div id="annualPie" style="width: 300px;height: 400px"></div>-->
            </el-card>
          </div>
          <div style="display:flex;width: 100%;flex-flow: column;margin-right: 2px;">
            <el-card style="width: 99%;margin-bottom: 10px;height: 450px">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>故障详情</span>
              </div>
              <div style="display: flex; width: 100%; text-align: left">
                <div style="width: 200px; padding: 20px; margin-left: 50px">
                  <h3>故障总数</h3>
                  <h1 style="color: #5470c6;font-size: 100px;">{{faultNum}}</h1>
                </div>
                <div style="width: 200px; padding: 20px">
                  <h3>故障类型数</h3>
                  <h1 style="color: #91cc75;font-size: 100px;">{{faultTypeNum}}</h1>
                </div>
                <div style="width: 200px; padding: 20px">
                  <h3>故障位置数</h3>
                  <h1 style="color: #fac858;font-size: 100px;">{{faultPositionNum}}</h1>
                </div>
              </div>
            </el-card>
            <div style="width: 100%;">
            <el-card style="width: 99%;height: 550px">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>故障数据详情</span>
              </div>
              <div style="overflow: auto">
                <div>
                  <label>车辆类型：</label>
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <el-table :data="basicInfo" stripe style="width: 100%" height="370">
                  <el-table-column prop="date" label="日期">
  <!--                  <template slot="header" slot-scope="scope">-->
  <!--                  -->
  <!--                  </template>-->
                  </el-table-column>
                  <el-table-column label="车型" prop="carModel">

                  </el-table-column>
                  <el-table-column label="车号" prop="vehicleNumber">

                  </el-table-column>
                  <el-table-column label="故障类型" prop="faultType">

                  </el-table-column>
                  <el-table-column label="故障位置" prop="faultLocation">

                  </el-table-column>
                  <el-table-column label="严重程度" prop="severity">

                  </el-table-column>
                </el-table>

              </div>
              <div style="margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="20"
                  style="display: inline-block"
                  :total="400">
                </el-pagination>
                <el-button style="float: right" size="mini" type="primary" @click="addFaultVisible=true">故障录入</el-button>
              </div>
            </el-card>
            </div>
          </div>
          <div style="width: 60%;display: flex;flex-flow: column">
            <el-card style="width: 100%;margin-bottom: 10px;height: 50%">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>故障位置汇总</span>
              </div>
              <div id="lineChart" style="width: 100%;height: 380px"></div>
            </el-card>
            <el-card style="width: 100%;height: 50%">
              <div slot="header"
                   style="font-size: 20px;font-weight: bolder;text-align: left">
                <span>故障数量统计</span>
              </div>
              <div id="histogram" style="width: 100%;;height: 380px"></div>
            </el-card>
          </div>
        </div>
      </div>
      <el-dialog
        title="故障录入"
        :visible.sync="addFaultVisible"
        width="60%"
        center
        :modal-append-to-body="false">
        <div>
          <el-steps :active="activeFaultEntry" finish-status="success" style="width: 60%;margin: 0 auto">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
          </el-steps>
        </div>
        <div>
          <div v-if="activeFaultEntry===0"  style="text-align: center">
              <label>故障位置：</label>
              <el-select v-model="positionSelect2" placeholder="请选择" >
                <el-option v-for="item in positionSelectData2" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
          </div>
          <div v-if="activeFaultEntry===1"  style="text-align: center">
            <div>
              <label>车型：</label>
              <el-select v-model="positionSelect1" placeholder="请选择" >
                <el-option v-for="item in positionSelectData1" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
              <label>位置：</label>
              <el-select v-model="positionSelect2" placeholder="请选择" >
                <el-option v-for="item in positionSelectData2" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-top: 10px">
              <label>车号：</label>
              <el-select v-model="positionSelect4" placeholder="请选择" >
                <el-option v-for="item in positionSelectData4" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
              <label>零件：</label>
              <el-select v-model="positionSelect3" placeholder="请选择" >
                <el-option v-for="item in positionSelectData3" :key="item" size="small"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-top: 10px">
              <label>描述：</label>
              <el-input
                type="textarea"
                autosize
                style="width: 50%"
                placeholder="请输入内容"
                v-model="textarea1">
              </el-input>
            </div>
          </div>
          <div v-if="activeFaultEntry===2" style="width: 60%;margin: 0 auto;margin-top: 10px">
            <div>
              <div>车型：</div>
              <el-divider></el-divider>
              <div>位置：</div>
              <el-divider></el-divider>
              <div>车号：</div>
              <el-divider></el-divider>
              <div>零件：</div>
              <el-divider></el-divider>
              <div>描述：</div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="activeFaultEntry--" v-if="activeFaultEntry!=0">上一步</el-button>
          <el-button type="primary" size="mini" @click="activeFaultEntry++" v-if="activeFaultEntry!=2">下一步</el-button>
          <el-button type="primary" size="mini" @click="addFaultVisible=false;activeFaultEntr=0" v-if="activeFaultEntry===2">完成</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import * as echarts from 'echarts'
  import AnnualPie from "../charts/AnnualPie";
  import Header from "../Header";
    export default {
      name: "faultInfoCard",
      components:{
        Header,
        AnnualPie
      },
      data(){
        return{
          color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          position:{
            secondTitle:'故障信息' ,
            thirdTitle:'故障信息管理'
          },
          activeFaultEntry:0,
          faultNum:1048,
          faultTypeNum:735,
          faultPositionNum: 580,
          activeName:'first',
          faultData: [
            {value: 1048, name: '故障总数'},
            {value: 735, name: '故障类型数'},
            {value: 580, name: '故障位置数'},
          ],
          addFaultVisible:false,
          textarea1:'',
          value1:0,
          basicInfo:[
            {date:'2020/4/5',carModel:'BC-769',vehicleNumber:'京AB1234',faultType:'故障三',faultLocation:'轴承',severity:'高'},
            {date:'2020/7/8',carModel:'BD-656',vehicleNumber:'京AB2344',faultType:'故障二',faultLocation:'中子',severity:'低'},
            {date:'2020/9/15',carModel:'GT-525',vehicleNumber:'京ACW123',faultType:'故障一',faultLocation:'主机架',severity:'中等'},
            {date:'2020/11/25',carModel:'FG-365',vehicleNumber:'京A32DEF',faultType:'故障二',faultLocation:'风转轴',severity:'高'},
            {date:'2020/7/5',carModel:'JU-120',vehicleNumber:'京A12345',faultType:'故障三',faultLocation:'转子',severity:'低'},
            {date:'2021/1/7',carModel:'GF-196',vehicleNumber:'京FWER23',faultType:'故障四',faultLocation:'风转轴',severity:'低'},
            {date:'2021/2/8',carModel:'BD-364',vehicleNumber:'京D323AE',faultType:'故障五',faultLocation:'中子',severity:'高'},
          ],
          positionSelect3:'',
          positionSelect2:'',
          positionSelect1:'',
          positionSelect4:'',
          positionSelectData1:[{name:'跑车',value:1},{name:'货车',value:2},{name:'装甲',value:1}],
          positionSelectData2:[{name:'故障一',value:1},{name:'故障二',value:2},{name:'故障三',value:1}],
          positionSelectData3:[{name:'轴承',value:1},{name:'主机架',value:2},{name:'转子',value:1}],
          positionSelectData4:[{name:'京D323AE',value:1},{name:'京FWER23',value:2},{name:'京A12345',value:1}],
          lineChartData:{
            xData:['18:53', '18:54', '18:55', '18:56', '18:57', '18:58', '18:59'],
            value1:[150, 230, 224, 218, 135, 147, 260]},
          histogram:{
            xData:['位置一', '位置二', '位置三', '位置四', '位置五', '位置六', '位置七'],
            value1:[120, 200, 150, 80, 70, 110, 130],
            value2:[130, 40, 120, 900, 71, 110, 130]},
        }
      },
      mounted() {
        let option = {
          legend: {},
          tooltip: {},
          xAxis: {
            type: 'category',
            data: this.histogram.xData,
            name:'故障位置'
          },
          yAxis: {
            type: 'value'
          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            {
              data:this.histogram.value1,
              type: 'bar',
              name:'故障一',
            },
            {
              data: this.histogram.value2,
              type: 'bar',
              name:'故障二',
            }
          ]
        };
        this.DrawAnnual('histogram',option)
        let op1 = {
          xAxis: {
            type: 'category',
            data: this.lineChartData.xData,
            name:'时间'
          },
          yAxis: {
            type: 'value',
            name:'故障数'
          },
          series: [{
            data: this.lineChartData.value1,
            type: 'line'
          }]
        };
        this.DrawAnnual('lineChart',op1)
      },
      methods:{
          DrawAnnual(id ,option){
            let myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option);
          }
      }
    }
</script>

<style scoped>
</style>
